<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 主题切换实现</title>
  <style>
    /* 定义根级CSS变量作为默认主题（亮色主题） */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --background-color: #f5f7fa;
      --text-color: #2c3e50;
      --card-bg: #ffffff;
      --border-color: #e0e7ff;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      --success: #27ae60;
      --warning: #f39c12;
      --danger: #e74c3c;
    }
    
    /* 暗色主题变量 */
    [data-theme="dark"] {
      --primary-color: #1abc9c;
      --secondary-color: #9b59b6;
      --background-color: #1a1a2e;
      --text-color: #ecf0f1;
      --card-bg: #16213e;
      --border-color: #2d4059;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    /* 粉色主题 */
    [data-theme="pink"] {
      --primary-color: #e84393;
      --secondary-color: #fd79a8;
      --background-color: #fff9fa;
      --text-color: #2d3436;
      --card-bg: #ffffff;
      --border-color: #ffeaa7;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    }
    
    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      padding: 20px;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 40px;
    }
    
    h1 {
      color: var(--primary-color);
      font-size: 2.5rem;
    }
    
    .theme-switcher {
      display: flex;
      gap: 10px;
    }
    
    .theme-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 30px;
      background: var(--card-bg);
      color: var(--text-color);
      cursor: pointer;
      font-weight: 600;
      box-shadow: var(--shadow);
    }
    
    .theme-btn.active {
      background: var(--primary-color);
      color: white;
    }
    
    .theme-btn:hover {
      transform: translateY(-2px);
    }
    
    .card-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
    }
    
    .card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 25px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border-color);
    }
    
    .card h2 {
      color: var(--primary-color);
      margin-bottom: 15px;
      font-size: 1.8rem;
    }
    
    .card p {
      margin-bottom: 15px;
    }
    
    .btn {
      display: inline-block;
      padding: 12px 24px;
      background: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 30px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      margin-top: 10px;
      transition: all 0.3s ease;
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    }
    
    .btn.secondary {
      background: var(--secondary-color);
    }
    
    .status-indicators {
      display: flex;
      gap: 20px;
      margin-top: 30px;
    }
    
    .indicator {
      padding: 15px;
      border-radius: 12px;
      background: var(--card-bg);
      flex: 1;
      text-align: center;
      box-shadow: var(--shadow);
    }
    
    .indicator.success {
      border-top: 4px solid var(--success);
    }
    
    .indicator.warning {
      border-top: 4px solid var(--warning);
    }
    
    .indicator.danger {
      border-top: 4px solid var(--danger);
    }
    
    .theme-info {
      background: var(--card-bg);
      padding: 20px;
      border-radius: 12px;
      margin-top: 40px;
      box-shadow: var(--shadow);
    }
    
    .theme-info h3 {
      margin-bottom: 15px;
      color: var(--secondary-color);
    }
    
    .code-block {
      background: rgba(0, 0, 0, 0.05);
      padding: 15px;
      border-radius: 8px;
      font-family: monospace;
      margin: 15px 0;
      overflow-x: auto;
      color: var(--text-color);
    }
    
    footer {
      text-align: center;
      padding: 30px 0;
      margin-top: 40px;
      border-top: 1px solid var(--border-color);
      color: var(--text-color);
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .card-container {
        grid-template-columns: 1fr;
      }
      
      .status-indicators {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>CSS 主题切换</h1>
      <div class="theme-switcher">
        <button class="theme-btn active" data-theme="light">亮色主题</button>
        <button class="theme-btn" data-theme="dark">暗色主题</button>
        <button class="theme-btn" data-theme="pink">粉色主题</button>
      </div>
    </header>
    
    <main>
      <div class="card-container">
        <div class="card">
          <h2>CSS 变量实现主题</h2>
          <p>CSS 自定义属性（也称为 CSS 变量）允许我们在整个样式表中定义可重用的值。通过改变根元素上的这些变量，我们可以轻松实现主题切换。</p>
          <button class="btn">了解更多</button>
        </div>
        
        <div class="card">
          <h2>主题切换的优势</h2>
          <p>使用 CSS 变量定义主题有以下好处：</p>
          <ul style="padding-left: 20px; margin: 15px 0;">
            <li>维护简单 - 只需修改一处变量值</li>
            <li>性能高效 - 纯 CSS 实现，无需额外库</li>
            <li>切换平滑 - 添加过渡效果提升体验</li>
            <li>易于扩展 - 添加新主题只需定义新变量集</li>
          </ul>
          <button class="btn secondary">查看示例</button>
        </div>
      </div>
      
      <div class="status-indicators">
        <div class="indicator success">
          <h3>成功状态</h3>
          <p>使用 --success 变量定义</p>
        </div>
        <div class="indicator warning">
          <h3>警告状态</h3>
          <p>使用 --warning 变量定义</p>
        </div>
        <div class="indicator danger">
          <h3>危险状态</h3>
          <p>使用 --danger 变量定义</p>
        </div>
      </div>
      
      <div class="theme-info">
        <h3>实现原理</h3>
        <p>在 :root 中定义默认变量，然后通过为 html 元素设置不同的 data-theme 属性值来切换主题：</p>
        
        <div class="code-block">
          /* 默认主题 (亮色) */
          :root {
            --primary-color: #3498db;
            --background-color: #f5f7fa;
            --text-color: #2c3e50;
          }
          
          /* 暗色主题 */
          [data-theme="dark"] {
            --primary-color: #1abc9c;
            --background-color: #1a1a2e;
            --text-color: #ecf0f1;
          }
          
          /* 在样式中使用变量 */
          body {
            background-color: var(--background-color);
            color: var(--text-color);
          }
        </div>
      </div>
    </main>
    
    <footer>
      <p>使用 CSS 变量实现主题切换 | 通过 JavaScript 动态切换 data-theme 属性</p>
    </footer>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const themeButtons = document.querySelectorAll('.theme-btn');
      const htmlElement = document.documentElement;
      
      // 从本地存储获取保存的主题
      const savedTheme = localStorage.getItem('theme') || 'light';
      htmlElement.setAttribute('data-theme', savedTheme);
      
      // 设置活动按钮状态
      themeButtons.forEach(btn => {
        if (btn.getAttribute('data-theme') === savedTheme) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
      
      // 添加主题切换事件
      themeButtons.forEach(button => {
        button.addEventListener('click', function() {
          const theme = this.getAttribute('data-theme');
          
          // 设置主题属性
          htmlElement.setAttribute('data-theme', theme);
          
          // 更新按钮状态
          themeButtons.forEach(btn => btn.classList.remove('active'));
          this.classList.add('active');
          
          // 保存到本地存储
          localStorage.setItem('theme', theme);
        });
      });
    });
  </script>
</body>
</html>